Bootstrap 4 এবং Bootstrap 5 এর মধ্যে পার্থক্য

Web Development - বুটস্ট্রাপ (Bootstrap 5) - Bootstrap 5 এর পরিচিতি |

বুটস্ট্রাপ ৪ এবং বুটস্ট্রাপ ৫ দুটোই জনপ্রিয় এবং শক্তিশালী ওয়েব ফ্রেমওয়ার্ক, কিন্তু বুটস্ট্রাপ ৫ কিছু নতুন বৈশিষ্ট্য এবং উন্নয়ন নিয়ে এসেছে যা বুটস্ট্রাপ ৪ এর থেকে আলাদা। এখানে বুটস্ট্রাপ ৪ এবং বুটস্ট্রাপ ৫ এর মধ্যে কিছু মূল পার্থক্য তুলে ধরা হলো:


১. jQuery এবং Popper.js এর অবলুপ্তি

বুটস্ট্রাপ ৪: বুটস্ট্রাপ ৪ jQuery এবং Popper.js ব্যবহার করত UI কম্পোনেন্ট যেমন ড্রপডাউন, টুলটিপ, মডাল ইত্যাদির কার্যকারিতা সম্পন্ন করার জন্য।

বুটস্ট্রাপ ৫: বুটস্ট্রাপ ৫ এ jQuery এবং Popper.js সরিয়ে ফেলা হয়েছে। এখন শুধুমাত্র ক্লিন, নেটিভ জাভাস্ক্রিপ্ট ব্যবহার করা হয়, যার ফলে কোডের সাইজ ছোট এবং দ্রুত কার্যকরী হয়।


২. গ্রিড সিস্টেমের পরিবর্তন

বুটস্ট্রাপ ৪: গ্রিড সিস্টেমে ১২ কলাম (columns) ছিল এবং বিভিন্ন স্ক্রীন সাইজের জন্য আলাদা ক্লাস যেমন col-lg-, col-md-, col-sm- ইত্যাদি ছিল। তবে col- ক্লাসটি সকল স্ক্রীনের জন্য একটি সাধারণ সাইজ নির্ধারণ করত।

বুটস্ট্রাপ ৫: বুটস্ট্রাপ ৫ এ গ্রিড সিস্টেমে নতুন ক্লাস col-xxl- যোগ করা হয়েছে, যা বড় স্ক্রীনের জন্য আরও নির্দিষ্ট কন্ট্রোল দিতে সহায়তা করে। এছাড়া, g- ক্লাস ব্যবহারের মাধ্যমে গ্রিড গ্যাপ (grid gap) নিয়ন্ত্রণ করা সম্ভব হয়েছে, যা আগে gutters ক্লাসের মাধ্যমে করা হতো।


৩. নতুন ইউআই কম্পোনেন্ট

বুটস্ট্রাপ ৪: বুটস্ট্রাপ ৪ এ বেশ কিছু জনপ্রিয় UI কম্পোনেন্ট ছিল, যেমন: মডাল, ড্রপডাউন, নেভিগেশন বার, বাটন ইত্যাদি।

বুটস্ট্রাপ ৫: বুটস্ট্রাপ ৫ এ নতুন কিছু ইউআই কম্পোনেন্ট যুক্ত করা হয়েছে:

  • Accordion: যা আগের collapse কম্পোনেন্টের উন্নত সংস্করণ।
  • Offcanvas: স্ক্রীনের বাইরে প্যানেল আনার জন্য নতুন উপাদান।
  • Toast: নতুন নোটিফিকেশন সিস্টেম যা অ্যাপ্লিকেশনের নোটিফিকেশন প্রদর্শন করতে ব্যবহার হয়।

৪. কাস্টম ফন্ট এবং রঙের সাপোর্ট

বুটস্ট্রাপ ৪: বুটস্ট্রাপ ৪ এর কাস্টম ফন্ট এবং রঙ নিয়ন্ত্রণ কিছুটা সীমিত ছিল, তবে আপনি CSS এর মাধ্যমে কিছু পরিবর্তন করতে পারতেন।

বুটস্ট্রাপ ৫: বুটস্ট্রাপ ৫ এ CSS ভ্যারিয়েবলস (CSS variables) এর মাধ্যমে কাস্টমাইজেশন আরও সহজ এবং শক্তিশালী করা হয়েছে। এখন আপনি সরাসরি বুটস্ট্রাপের ডিফল্ট রঙ, ফন্ট এবং অন্যান্য সিএসএস প্রপার্টি পরিবর্তন করতে পারবেন।


৫. মার্জিন এবং প্যাডিং ক্লাসের পরিবর্তন

বুটস্ট্রাপ ৪: বুটস্ট্রাপ ৪ এ মার্জিন এবং প্যাডিং নিয়ন্ত্রণ করার জন্য m-, p- এর পর বিভিন্ন সংখ্যার মান ব্যবহার করা হতো।

বুটস্ট্রাপ ৫: বুটস্ট্রাপ ৫ এ মার্জিন এবং প্যাডিং নিয়ন্ত্রণের জন্য আরও নির্দিষ্ট ক্লাস যুক্ত করা হয়েছে। যেমন, m-{breakpoint}-{size}, যেখানে breakpoint হতে পারে sm, md, lg এবং size হতে পারে 0, 1, 2, 3, ইত্যাদি। এই নতুন ক্লাস সিস্টেমটি অনেক বেশি ফ্লেক্সিবল এবং কাস্টমাইজেবল।


৬. ফন্ট অ্যাওয়েসোম (Font Awesome) ইন্টিগ্রেশন

বুটস্ট্রাপ ৪: বুটস্ট্রাপ ৪ ফন্ট অ্যাওয়েসোম আইকন ইন্টিগ্রেশন সমর্থন করতো, তবে এটি একটি বাহ্যিক লাইব্রেরি হিসেবে ব্যবহৃত হত।

বুটস্ট্রাপ ৫: বুটস্ট্রাপ ৫ এ ফন্ট অ্যাওয়েসোম এর পরিবর্তে SVG আইকন সমর্থন যোগ করা হয়েছে। এতে ডেভেলপাররা এখন SVG আইকন ব্যবহার করতে পারবেন, যা স্কেলেবল এবং দ্রুত লোড হতে সাহায্য করে।


৭. বুটস্ট্রাপ ৫ এর ব্রাউজার সাপোর্ট

বুটস্ট্রাপ ৪: বুটস্ট্রাপ ৪ কিছু পুরনো ব্রাউজার যেমন Internet Explorer 10 এবং 11 সাপোর্ট করতো।

বুটস্ট্রাপ ৫: বুটস্ট্রাপ ৫ এ Internet Explorer সাপোর্ট সরিয়ে ফেলা হয়েছে। এখন এটি শুধু আধুনিক ব্রাউজারগুলো যেমন Chrome, Firefox, Safari, Edge সাপোর্ট করে, যার ফলে কোডের পারফরম্যান্স এবং ফিচারের উন্নতি ঘটেছে।


৮. থিম এবং কাস্টমাইজেশন

বুটস্ট্রাপ ৪: বুটস্ট্রাপ ৪ এর থিম কাস্টমাইজেশনের জন্য SCSS ব্যবহার করা হতো, এবং সেখানে বেশ কিছু পূর্বনির্ধারিত ভ্যারিয়েবল ছিল।

বুটস্ট্রাপ ৫: বুটস্ট্রাপ ৫ এ SCSS এবং CSS ভ্যারিয়েবলস এর মাধ্যমে আরও সহজ এবং শক্তিশালী কাস্টমাইজেশন করা সম্ভব হয়েছে। এখন আপনি অনেক সহজেই থিম পরিবর্তন, রঙ কাস্টমাইজ এবং ডিজাইন চেঞ্জ করতে পারবেন।


সারাংশ

বুটস্ট্রাপ ৪ এবং বুটস্ট্রাপ ৫ এর মধ্যে প্রধান পার্থক্যগুলো হল: jQuery এবং Popper.js এর অবলুপ্তি, গ্রিড সিস্টেমে পরিবর্তন, নতুন ইউআই কম্পোনেন্টস, CSS ভ্যারিয়েবলস এর ব্যবহার এবং ব্রাউজার সাপোর্ট। বুটস্ট্রাপ ৫ এর মাধ্যমে উন্নত কাস্টমাইজেশন, নতুন ফিচার এবং কোডের পারফরম্যান্সের ক্ষেত্রে অনেক উন্নতি এসেছে।

Content added By
Promotion